<template>
  <div class="upload_topics">
    <div class="title_nav">
      <h3 style="color:gray">发布话题</h3>
      <div>
        <input @click="uploadTopics" type="button" value="发布">
        <input @click="$router.go(-1)" type="button" value="返回">
      </div>
    </div>
    <div class="content">
      <label for="title" class="biaoti">
        <span>
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-fabiaopinglun'></use>
          </svg>
          标题：</span>
        <input type="text" v-model="topicsData.title" id="title" maxlength="50" placeholder="想一个题目把">
      </label>
      <label for="text" class="text">
        <span>
          <svg class='icon' aria-hidden='true'>
            <use xlink:href='#icon-chaojihuati'></use>
          </svg>
          内容：</span>
        <textarea cols="100" rows="10" id="text" maxlength="300" placeholder="发布内容" v-model="topicsData.content"></textarea>
      </label>
      <div class="file">
        <div>
          <span>
            <svg class='icon' aria-hidden='true'>
              <use xlink:href='#icon-xiangguan'></use>
            </svg>
            附件：</span>
          <label for="upload" class="upload_btn" v-show="hint">选择文件</label>
          <span v-if="hint" style="color: gray">只能上传5张图片或视频</span>
          <button @click="removeVideo" v-else class="removeBtn">删除视频</button>
          <input class="upload" id="upload" type="file" @change="readFile" ref="file">
        </div>
        <transition-group name="fade" tag="ul" class="file_img" v-if="preview.length <= 5">
          <li v-for="(item,index) in preview" :key="item" @mouseenter="removeBtn = index" @mouseleave="removeBtn = -1">
            <img :src="item" alt="">
            <div class="remove"  title="删除" v-show="removeBtn == index">
              <svg class="icon" aria-hidden="true" @click="removeImg(index)">
                <use xlink:href="#icon-shanchu-copy"></use>
              </svg>
            </div>
          </li>
        </transition-group>
        <video v-else :src="preview" controls loop autoplay></video>
      </div>
    </div>
  </div>
</template>

<script>import { mapActions, mapMutations } from "vuex";

export default {
  name: 'Uptopics',

  data() {
    return {
      file: [], // 上传文件数据集
      fileType: '', // 文件类型
      preview: [], // 预览文件数据集
      removeBtn: -1, // 删除图片索引
      topicsData: { // 话题数据
        title: '', // 标题
        content: '' // 内容
      },
    };
  },

  watch: {
    file(newVal){
      if(newVal.length == 0){
        this.fileType = ''
      }
    }
  },

  computed: {
    hint(){
      return Array.isArray(this.preview)
    }
  },

  methods: {
    // 读取文件
    readFile(){
      let file = this.$refs.file.files[0]
      if(this.file.length == 5){
        this.showHint({title:'最多上传五张图片!',isFlag:false})
        return
      }
      if(file.size > 1024000 * 50){
        this.showHint({title:'文件不能超过50M',isFlag:false})
        return
      }
      if(file.type.indexOf('video') != -1){
        this.preview = URL.createObjectURL(file)
        this.file = [file]
        this.fileType = 'video'
      }
      else if(file.type.indexOf('image') != -1){
        if(this.fileType == 'video'){
          this.file.length = 0,
          this.preview = []
        }
        this.preview.push(URL.createObjectURL(file))
        this.file.push(file)
        this.fileType = 'image'
      }else{
        this.showHint({title:'只能上传视频和图片',isFlag:false})
      }
      this.$refs.file.value = ''
    },
    // 删除图片
    removeImg(i){
      if(confirm("确定删除?")){
        this.file.splice(i,1)
        this.preview.splice(i,1)
      }
    },
    // 删除视频
    removeVideo(){
      if(confirm("确定删除?")){
        this.file = []
        this.preview = []
      }
    },
    // 上传话题
    uploadTopics(){
      if(!this.topicsData.title.trim()){
        this.showHint({title: '标题不能为空!',isFlag: false})
      }
      else if(!this.$store.state.userinfo.name && !this.$store.state.userinfo.birthday){
         this.showHint({title: '请完善个人信息!',isFlag: false})
        this.$router.push('/User/info')
      }
      else{
        if(!confirm('确认上传?'))return
        let data = {
          title: this.topicsData.title,
          content: this.topicsData.content,
          fileType: Array.isArray(this.preview) ? 'image' : 'video'
        }
        if(this.preview.length == 0)data.fileType = ''
        this.file.forEach((v,i) => data['file'+i] = v)
        this.showLoading('正在上传...')
        this.$api.uploadTopics(data).then(res => {
          this.hideLoading()
          if(res == 1){
            this.showHint({title: '发布成功',isFlag: true})
            this.$router.push('/User/topics')
          }else{this.showHint({title: '上传失败',isFlag: false})}
        })
      }
    },
    ...mapMutations(['showLoading','hideLoading']),
    ...mapActions(['showHint'])
  },
};
</script>

<style scoped>
.upload_topics{
  padding: 60px;
}
.content{
  margin: 20px 0;
  display: flex;
  flex-direction: column;
}
.content .text{
  display: flex;
  margin-top: 20px;
}
.content .text textarea{
  padding: 10px;
  margin-left: 10px;
  outline: none;
  flex: 1;
  font-family: "微软雅黑";
}
.content .file{
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}
.content .file input{
  margin: 0 10px;
}
.content .file .upload_btn{
  width: 66px;
  height: 30px;
  line-height: 30px;
  background-color: gray;
  display: inline-block;
  border-radius: 20px;
  text-align: center;
  color: white;
  font-size: 0.6rem;
  cursor: pointer;
  margin: 0 10px;
  transition: all .3s ease;
  opacity: .7;
}
.content .file .upload_btn:hover{
  color: wheat;
  opacity: 1;
}
.content .file .upload{
  width: 0;
  height: 0;
  opacity: 0;
}
.content .file .file_img{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.content .file .file_img li{
  margin: 0 10px 10px 0;
  position: relative;
}
.content .file .file_img img{
  width: 160px;
  height: 160px;
  border: 1px solid rgb(199, 199, 199);
}
.content .file .file_img .remove{
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .6);
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content .file .file_img .remove .icon{
  font-size: 2rem;
}
.content .file video{
  width: 300px;
  margin: 10px;
}
.content .file .removeBtn{
  color: gray;
  cursor: pointer;
  padding: 5px;
}
.content .file .removeBtn:hover{
  color: red;
}
@media screen and (max-width: 800px) {
  .upload_topics{
    padding: 10px;
  }
  .content .file video{
    width: 280px;
  }
}
</style>